<template>
  <NuxtLayout name="sign">
    <div class="sign-wrapper">
      <h2 class="site-name">WATT权限管理系统</h2>
      <div class="title-tab"><span>欢迎注册</span></div>

      <a-form ref="formRef" :model="form" :rules="rules" class="login-form thin-form" layout="vertical" @keydown.enter="handleSubmit">
        <div>
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="form.username" size="large" allowClear placeholder="用户名">
              <template #prefix>
                <user-outlined class="pre-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input v-model:value="form.password" :type="form.pwInputType" size="large" allowClear placeholder="密码">
              <template #prefix>
                <lock-outlined class="pre-icon" />
              </template>
              <template #suffix>
                <eye-invisible-outlined v-if="form.pwInputType === 'password'" class="pre-icon" @click.stop="form.pwInputType = 'text'" />
                <eye-outlined v-else class="pre-icon" @click.stop="form.pwInputType = 'password'" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="确认密码" name="confirmPass">
            <a-input v-model:value="form.confirmPass" :type="form.pwInputType" size="large" allowClear placeholder="确认密码">
              <template #prefix>
                <lock-outlined class="pre-icon" />
              </template>
              <template #suffix>
                <eye-invisible-outlined v-if="form.pwInputType === 'password'" class="pre-icon" @click.stop="form.pwInputType = 'text'" />
                <eye-outlined v-else class="pre-icon" @click.stop="form.pwInputType = 'password'" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="邮箱" name="email">
            <a-input v-model:value="form.email" size="large" allowClear placeholder="邮箱">
              <template #prefix>
                <mail-outlined class="pre-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="验证码" name="code">
            <a-row :gutter="10">
              <a-col :span="15">
                <a-input v-model:value="form.code" allowClear size="large" placeholder="验证码">
                  <template #prefix>
                    <safety-outlined class="pre-icon" />
                  </template>
                </a-input>
              </a-col>
              <a-col :span="9">
                <captcha ref="captRef" :scene="form.scene" />
              </a-col>
            </a-row>
          </a-form-item>
        </div>

        <a-form-item class="login-form-btn">
          <a-button type="primary" block :loading="loading" @click="handleSubmit"> 注册 </a-button>
          <div class="tip"><span>已有账号？</span><span class="link" @click.stop="goLogin">去登录</span></div>
        </a-form-item>
      </a-form>
    </div>
  </NuxtLayout>
</template>
<script setup>
import WattTool from '@wattjs/tool'
import { ref, reactive } from 'vue'
import { Modal } from 'ant-design-vue'
import Captcha from '../components/common/captcha.vue'

import { baseURL } from '../api/config'
import { userRegistry } from '../api/user.model'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const formRef = ref()

const form = reactive({
  pwInputType: 'password',
  username: '',
  password: '',
  confirmPass: '',
  code: '',
  scene: 'reg'
})
const rules = reactive({
  username: [{
              required: true,
              min: 2,
              max: 25,
              pattern: '^[0-9a-zA-Z]+[_]*[0-9a-zA-Z]+$',
              message: '账号为2-25个字母、数字、下划线组合字符'
            }],
  password: [{
              required: true,
              min: 6,
              max: 20,
              pattern: '^[0-9a-zA-Z]+[_]*[0-9a-zA-Z]+$',
              message: '密码为6-20个字母、数字、下划线组合字符'
            }],
  confirmPass: [{
                required: true,
                validator: async (_rule, value) => {
                  if (WattTool.Type.isEmpty(value)) return Promise.reject('确认密码不能为空')
                  else if (value !== form.password) return Promise.reject('确认密码需与密码保持一致')
                  else Promise.resolve()
                }
              }],
  code: [{
          required: true,
          min: 4,
          max: 4,
          pattern: '[0-9a-zA-Z]{4}',
          message: '请正确输入验证码'
        }],
  email: [{
          required: true,
          min: 2,
          pattern: '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$',
          message: '请正确输入邮箱地址'
        }]
})

const handleSubmit = () => {
  if (loading.value) return
  formRef.value
    .validate()
    .then(() => {
      loading.value = true
      userRegistry.send({
        scene: form.scene,
        code: form.code,
        username: form.username,
        password: form.password,
        email: form.email
      }).then((res) => {
        loading.value = false
        console.log(res)
        Modal.success({
          title: '系统提示',
          content: res,
          onOk: async () => {
            await navigateTo(`/${baseURL.replace(/\/$/, '')}/login`, { external: true })
          }
        })
      }).catch(() => {
        loading.value = false
      })
    })
}

const goLogin = async () => {
  await navigateTo(`${baseURL.replace(/\/$/, '')}/login`, { external: true })
}

</script>
<style lang="less" scoped>
@import "../assets/less/sign.less";
.thin-form {
  .ant-form-item {
    margin-bottom: 12px;
  }
}
</style>
